
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form action="personalDataSubmit.php" method="post">
        <p>姓名</p>
        <p><input style="width: 500px;" type="text" name="name" id="name" value="" /></p>
        <p>特长</p>
        <p><input style="width: 500px;" type="text" name="merit" id="merit" value="" /></p>
        <p>性别</p>
        <p>
            <input type="radio" name="sex" id="man" value="0" />男
            <input type="radio" id="woman" name="sex" value="1" />女
        </p>
        <p>公司</p>
        <p><input style="width: 300px;" name="firm" type="text" id="firm" value="" /></p>
        <p>职务</p>
        <p><input style="width: 300px;" type="text" name="post" id="post" value="" /></p>
        <p>微信</p>
        <p><input style="width: 300px;" type="text" name=""WeChat id="WeChat" value="" /></p>
        <p>QQ</p>
        <p><input style="width: 300px;" type="text" name="QQ" id="QQ" value="" /></p>
        <p>领英</p>
        <p><input style="width: 300px;" type="text" name="LinkedIn" id="LinkedIn" value="" /></p>
        <p>微博</p>
        <p><input style="width: 300px;" type="text" name="microblog" id="microblog" value="" /></p>
        <p>博客</p>
        <p><input style="width: 300px;" type="text" name="blogs" id="blogs" value="" /></p>
        <p>所在地</p>
        <p>
            <select onchange="provinceChange()" name="province" id="province" style="width: 150px;">
                <option value="-1">请选择省份</option>
            </select>
            <select name="city" id="city" style="width: 150px;">
                <option value="-1">请选择城市</option>
            </select>
        </p>
        <p>自我介绍</p>
        <p><textarea rows="5px" cols="50px" name="info"></textarea></p>
        <p><button type="submit" style="background-color: coral;">更新</button></p>
    </form>
</body>
<script type="text/javascript">
    $provinceName=['北京市','上海市','福建省','广东省'];
    $provinceName.push('江西省');
    $cityName=[
        ['朝阳区','海淀区'],
        ['浦西区','浦东区'],
        ['福州市','龙岩市'],
        ['深圳市','东莞市'],
        ['南昌市','抚州市']
    ];
    onload = function(){
        $provinceObject = document.getElementById('province');
        // console.log(provinceObject);
        for($i=0;$i<$provinceName.length;$i++){
            $provinceObject.innerHTML+=`<option value="`+$i+`">`+$provinceName[$i]+`</option>`;
        }
    }
    function provinceChange(){
        $provinceObject = document.getElementById('province');
        $cityObject = document.getElementById('city');
        if($provinceObject.value==-1){
            return;
        }
        $cityObject.innerHTML=`<option value="-1">请选择市区</option>`;
        $city=$cityName[$provinceObject.value];
        for($i=0;$i<$city.length;$i++){
            $cityObject.innerHTML+=`<option value="`+$i+`">`+$city[$i]+`</option>`;
        }
    }
</script>
</html>





